<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>红绿灯</title>
		<style>
		.box{
		padding-left: 50px;
		margin: 0 auto;
		width: 35%;
		height: 150px;
		border: 2px solid gainsboro ;
		border-radius: 1%;
		}
		#red,#green,#yellow{
		width: 100px;
		height: 100px;
		margin-top: 25px;
		margin-right: 25px;
		border: 1px solid gainsboro;
		border-radius: 100%;
		display: inline-block;
		}
		.count{
		font-size: 30px;
		float: right;
		margin-right: 70px;
		margin-top: 50px;
		}
		</style>
	</head>
	<body>
		<div class="box">
			<div id="red"></div>
			<div id="yellow"></div>
			<div id="green"></div>
			<div id="count" class="count"></div>
		</div>
		<script>
			var lamp = {
				//红灯相关数据
				red: {
					obj: document.getElementById('red'),
					timeout: 30,
					style: ['red', 'gray', 'gray'],
					next: 'green'
				},
				//黄灯相关数据
				yellow: {
					obj: document.getElementById('yellow'),
					timeout: 5,
					style: ['gray', 'yellow', 'gray'],
					next: 'red'
				},
				//绿灯相关数据
				green: {
					obj: document.getElementById('green'),
					timeout: 35,
					style: ['gray', 'gary', 'green'],
					next: 'yellow'
				},
				changeStyle(style) {
					this.red.obj.clssName = style[0];
					this.yellow.obj.clssName = style[1];
					this.green.obj.className = style[2];
				}
			};
			var count = {
				obj: document.getElementById('count'),
				change: function(num) {
					this.obj.innerText = (num < 10) ? ('0' + num) : num;
				}
			};
			var now = lamp.green;
			var timeout = now.timeout;
			lamp.changeStyle(now.style);
			count.change(timeout);
			setInterval(function() {
				if(--timeout <= 0) {
					now = lamp[now.next];
					timeout = now.timeout;
					lamp.changeStyle(now.style);
				}
				count.change(timeout);
			}, 1000);
		</script>
	</body>
</html>